﻿@page "/services"
@inject ApiHelper apiHelper;
@{
	ViewBag.CurrentNavigate = "/services";
	var data =await apiHelper.GetSettingsListAsync("services");
}

@{await Html.RenderPartialAsync("BreadCrumbs");}

<div class="section">
	<div class="container">
		<div class="row items">
			<div class="col-12">
				<div class="section-heading heading-center">
					<div class="section-subheading">Areas what we serv</div>
					<h1>Our Services</h1>
				</div>
			</div>
			@for(var i=0;i<data.Length;i++)
			{
				var item = data[i]; var icon = "corporate_fare"; if (i == 1) icon = "support_agent"; if (i == 2) icon = "cloud_download"; if (i == 3) icon = "laptop_mac"; if (i == 4) icon = "phone_android"; if (i == 5) icon = "tv"; 
				<div class="col-lg-4 col-md-6 col-12 item">
					<!-- Begin icon item -->
					<a href="#" class="iitem item-style">
						<div class="iitem-icon">
							<i class="material-icons material-icons-outlined md-48">@icon</i>
						</div>
						<div class="iitem-icon-bg">
							<i class="material-icons material-icons-outlined">@icon</i>
						</div>
						<h2 class="iitem-heading item-heading-large">@item.Key</h2>
						<div class="iitem-desc">
							@item.Value
						</div>
					</a>
				</div>
			}
			
			 
			 
		</div>
	</div>
</div>
@section css{
	<style>
		main {
			margin: auto;
			padding: 1rem;
			width: 800px;
			max-width: calc(100% - 2rem);
			color: white;
			font-size: 20px;
			line-height: 1.6;
		}

		.astro-a {
			position: absolute;
			top: -32px;
			left: 50%;
			transform: translatex(-50%);
			width: 220px;
			height: auto;
			z-index: -1;
		}

		h1 {
			font-size: 4rem;
			font-weight: 700;
			line-height: 1;
			text-align: center;
			margin-bottom: 1em;
		}

		.text-gradient {
			background-image: var(--accent-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-size: 400%;
			background-position: 0%;
		}

		.instructions {
			margin-bottom: 2rem;
			border: 1px solid rgba(var(--accent-light), 25%);
			background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
			padding: 1.5rem;
			border-radius: 8px;
		}

			.instructions code {
				font-size: 0.8em;
				font-weight: bold;
				background: rgba(var(--accent-light), 12%);
				color: rgb(var(--accent-light));
				border-radius: 4px;
				padding: 0.3em 0.4em;
			}

			.instructions strong {
				color: rgb(var(--accent-light));
			}

		.link-card-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
			gap: 2rem;
			padding: 0;
		}
	</style>

}